<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面暂未开放</title>
    <!-- 引入 Tailwind CSS 用于样式设计 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#E8F3FF',
                        neutral: '#F5F7FA',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .pulse-circle {
                animation: pulse 2s infinite;
            }
            .fade-in {
                animation: fadeIn 1.5s ease-in-out;
            }
            .slide-up {
                animation: slideUp 1s ease-out;
            }
        }

        /* 动画定义 */
        @keyframes pulse {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 15px rgba(22, 93, 255, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col items-center justify-center p-4">
<!-- 页面容器 -->
<div class="max-w-md w-full text-center fade-in">
    <!-- 加载动画图标 -->
    <div class="relative w-32 h-32 mx-auto mb-8">
        <div class="absolute inset-0 flex items-center justify-center">
            <i class="fa fa-lock text-primary text-5xl z-10"></i>
        </div>
        <div class="absolute inset-0 rounded-full bg-primary/20 pulse-circle"></div>
    </div>

    <!-- 标题和描述 -->
    <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-gray-800 mb-4 slide-up" style="animation-delay: 0.2s">页面暂未开放</h1>
    <p class="text-gray-600 text-lg mb-8 slide-up" style="animation-delay: 0.4s">
        抱歉，您访问的页面正在紧张筹备中，即将与您见面。<br>请稍后再来查看！
    </p>

    <!-- 操作按钮 -->
    <div class="flex flex-col sm:flex-row justify-center gap-4 slide-up" style="animation-delay: 0.6s">
        <a href="javascript:history.back()" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all flex items-center justify-center">
            <i class="fa fa-arrow-left mr-2"></i> 返回上一页
        </a>
        <a href="/" class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all flex items-center justify-center">
            <i class="fa fa-home mr-2"></i> 回到首页
        </a>
    </div>

    <!-- 通知订阅区域 -->
    <div class="mt-12 p-6 bg-white rounded-xl shadow-sm border border-gray-100 slide-up" style="animation-delay: 0.8s">
        <h3 class="text-lg font-semibold text-gray-800 mb-3">想第一时间知道开放信息？</h3>
        <div class="flex flex-col sm:flex-row gap-3">
            <input type="email" placeholder="请输入您的邮箱" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <button class="px-4 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all whitespace-nowrap">
                订阅通知
            </button>
        </div>
        <p class="text-xs text-gray-400 mt-2">我们尊重您的隐私，不会向第三方泄露您的信息</p>
    </div>
</div>

<!-- 页脚 -->
<footer class="mt-auto py-6 text-gray-500 text-sm slide-up" style="animation-delay: 1s">
    <p>© 2024 网站名称 版权所有 | 联系我们：support@example.com</p>
</footer>

<!-- 简单的交互脚本 -->
<script>
    // 为输入框添加回车提交功能
    const emailInput = document.querySelector('input[type="email"]');
    const subscribeBtn = document.querySelector('button');

    emailInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            subscribeBtn.click();
        }
    });

    // 订阅按钮点击事件
    subscribeBtn.addEventListener('click', () => {
        const email = emailInput.value.trim();
        if (email) {
            // 这里可以添加实际的订阅逻辑
            alert('订阅成功！开放时我们将第一时间通知您。');
            emailInput.value = '';
        } else {
            alert('请输入有效的邮箱地址');
        }
    });
</script>
</body>
</html>